import AllHeader from "../header";
import AllFooter from "../footer";
import "./index.css";
import React, { useState, useEffect } from "react";
import { Icon } from "antd";
import { allStore } from "../../store/AllStore";
import 地址地图 from "../contact/地址地图.png";
export function Contact() {
  const jump = (path) => {
    window.location.replace(`http://${window.location.host}/${path}`);
  };
  const [change, setChange] = useState(false);
  const [isWhiteHeader, setIsWhite] = useState(true);
  const [headerColor, setHeaderColor] = useState(undefined);
  useEffect(() => {
    const handleScroll = () => {
      const position = document.documentElement.scrollTop;
      if (position > 100) {
        setIsWhite(false);
        setHeaderColor("#fff");
      } else {
        setIsWhite(true);
        setHeaderColor(undefined);
      }
    };

    window.addEventListener("scroll", handleScroll);

    // 清理函数，在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  const Slide = (id) => {
    const element = document.getElementById(id);
    if (!element) {
      return;
    }
    const rect = element.getBoundingClientRect();
    if (rect.top) {
      window.scrollTo({
        top: rect.top + window.scrollY - 70,
        behavior: "smooth",
      });
    }
  };

  const Change = () => {
    setChange(!change);
  };
  return (
    <>
      <AllHeader
        isWhite={isWhiteHeader}
        color={headerColor}
        allPageFlase={Change}
      />
      <div className="contact-top">
        <div style={{ fontSize: 48, fontWeight: "bold" }}>
          {allStore.isEnglish ? "Contact Information" : "联系方式"}
        </div>
        <span>
          <span
            onClick={() => {
              jump("home");
            }}
            style={{ cursor: "pointer" }}
          >
            {allStore.isEnglish ? "Home" : "首页"}
          </span>
          <Icon style={{ fontSize: 18, margin: 6 }} type="swap-right" />
          <span
            onClick={() => {
              Slide("contact-us");
            }}
            style={{ cursor: "pointer" }}
          >
            {allStore.isEnglish ? "Contact Information" : "联系方式"}
          </span>
        </span>
      </div>
      <ContactUs/>
      <AllFooter />
    </>
  );
}
export function ContactUs(){
  return <div style={{ height: 640, backgroundColor: "#fff" }} id="contact-us">
  <div
    style={{
      height: 100,
      width: "100%",
      textAlign: "center",
      fontSize: 36,
      fontWeight: "bold",
      paddingTop: 30,
    }}
  >
   {allStore.isEnglish ? "Contact Us" : "联系我们"}
  </div>
  <div
    style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    }}
  >
    <div style={{ width: 400, marginRight: 20 }}>
      <div style={{ marginTop: 40, marginBottom: 80, display: "flex" }}>
        <Icon style={{ fontSize: 40, marginRight: 40 }} type="phone" />
        <div>
          <div style={{ fontSize: 18 }}>
            {allStore.isEnglish ? "Phone" : "电话"}：18606386038
          </div>
          <div>
            {allStore.isEnglish ? "Monday to Friday" : "周一至周五"}{" "}
            8:30-17:00
          </div>
        </div>
      </div>
      <div style={{ marginBottom: 80, display: "flex" }}>
        <Icon style={{ fontSize: 40, marginRight: 40 }} type="mail" />
        <div>
          <div style={{ fontSize: 18 }}>
            {allStore.isEnglish ? "Email" : "邮箱"}：18606386038@163.com
          </div>
          <div>{allStore.isEnglish ? "All day" : "全天"}</div>
        </div>
      </div>
      <div style={{ marginBottom: 80, display: "flex" }}>
        <Icon style={{ fontSize: 40, marginRight: 40 }} type="home" />
        <div>
          <div style={{ fontSize: 18 }}>
            {allStore.isEnglish
              ? "Zibo, Zhoucun District"
              : "淄博，周村区"}
          </div>
          <div>
            {allStore.isEnglish
              ? "Room 706, Building 2, Financial Center, Intersection of Zhengyang Road and Qingnian Road"
              : "正阳路与青年路交叉路口金融中心2号楼706室"}
          </div>
        </div>
      </div>
    </div>
    <img height={400} alt="" src={地址地图}></img>
  </div>
</div>
}
